<!-- @format -->

<template>
  <div>
    <input
      type="text"
      v-model="userObj.uname" />

    <button @click="userObj = {}">设置</button>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        userObj: {
          uname: '',
          pwd: ''
        }
      }
    },
    watch: {
      // 只有对userObj本身赋值了，才会触发这个函数
      // 换句话说，如果userObj中的属性变了，这样写侦听不到
      // 需要用完整写法
      // userObj() {
      //   console.log('userObj变了')
      // }
      userObj: {
        immediate: true, //让handler函数在初始化的时候立即执行一次
        deep: true, // 开启深度侦听(对象里面任何一个属性变了，也要能侦听到)
        handler(newVal, oldVal) {
          // 处理程序
          console.log('userObj变了')
          // console.log(newVal, oldVal)
          // 注意：这里的newVal, oldVal, this.userOb是同一个对象，指向同一个地址
          console.log(newVal === oldVal) // true
          console.log(newVal === this.userObj) // true
        }
      }
    }
  }
</script>

<style></style>
